<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
    <script src="./lib/vue2.6.10.js"></script>
    <script src="./lib/vue-router.js"></script>
    <style>
    .container{
        display: flex;
    }
    .left {
        background-color: lightgrey;
        height: 800px;
        flex: 3;
    }
    .right{
        background-color: lightblue;
        flex: 7;
    }
    </style>
</head>
<body>
    <div id="app">
        <router-link to="/home">默认</router-link> | 
        <router-link to="/emoh">反转</router-link>
        <hr>
        <div class="container">
            <div class="left">
                <router-view name="left"></router-view>
            </div>
            <div class="right">
                <router-view name="right"></router-view>
            </div>
        </div>
    </div>


    <script>

        var box1 = {
            template: "<h1>第一块</h1>",
        };
        var box2 = {
            template: "<h1>第二块</h1>",
        };

        const router = new VueRouter({
            routes: [
                {path:'/home',components:{
                    left: box1,
                    right: box2
                }},
                {path:'/emoh',components:{
                    left: box2,
                    right: box1
                }},
            ]
        })
        
        // 创建一个vue实例
        var vm = new Vue({
            el:'#app', // 当前new的这个vue实例要控制的DOM
            data:{     // 所有的数据
            },
            router
        })

    </script>
</body>
</html>